import "./club.less";
import React from "react";
import classnames from "classnames";
import { NavLink } from "react-router-dom";
import { connect } from "react-redux";
import CreateClubDialog from "./CreateClubDialog.tsx";
import GamePad from "../appComponents/GamePad";

const mapStateToProps = state => {
  return {
    gameList: state.app.gameData,
    userInfo: state.app.userInfo
  };
};
const mapDispatchToProps = (dispatch, ownProps) => {
  return {
    openCreateGame: gameData =>
      dispatch(global.allActions.appActions.openCreateGame(gameData))
  };
};

class Club extends React.Component<any, any> {
  public constructor(props) {
    super(props);
    this.state = {
      showDialog: false,
      myClubsList: []
    };
  }

  public componentDidMount() {
    var str = navigator.userAgent.toLowerCase();
    var ver = str.match(/iphone/gi);
    if (ver) {
      this.setState({
        iOSVersion: true
      });
    }
  }

  render() {
    let { showDialog, myClubsList } = this.state;
    return (
      <div className="club-container">
        <div className="club-games">
          <GamePad showCreateClub={() => {this.setState({showDialog: true})}}/>
        </div>
        {showDialog ? <CreateClubDialog close={()=>{ this.setState({showDialog: false})}} /> : null}
        <div className="usercenter-bottom">
          <img className="bar" src="img/app/kuang-bottom.png?v=20181201" alt="" />
          <div className="text">
            <img src="img/club/club-bottom-title.png" alt="" className="club-bottom-title"/>
            {/* <span>俱乐部</span> */}
          </div>
          <NavLink to="/ClubDetails">
            <img className="back" src="img/app/back.png?v=20181201" alt="" />
          </NavLink>
        </div>
      </div>
    );
  }
}
export default connect(
  mapStateToProps,
  mapDispatchToProps
)(Club);
